<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="qwe" class="123">
        123
    </div>




    <script>
        // 文档
        // document

        // 1 通过ID名称获取元素节点  dom.getElementById("id名称")   获取单个元素节点   匹配第一个出现的元素节点
        // dom.getELementById("id名称")
        // var btn = document.  get   Element  By  Id   ("myID")
        // console.log(btn)

        // 2 通过标签名称获取元素节点列表  dom.  get  ELements   By  Tag  Name  ("标签名称")
        // var el = document.getElementsByTagName("button")
        // console.log(el)
        // console.log(el[0])
        // console.log(el[1])
        // console.log(el[2])
        // console.log(el[3])
        // var a = document.getElementById("myID")
        // console.log(a)
        // var b = document.getElementsByTagName("div")
        // console.log(b)

        // 3  dom.innerHTML  可以获取内容 也可以修改
        // var a = document.getElementsByTagName("div")
        // a[0].innerHTML = 321

        //  4 修改行内样式 dom.style.属性
        // var a = document.getElementById("qwe")
        // // console.log(a.style)
        // a.style.background = "red"
        // a.style.fontSize = "32px"

        // 5 获取ID 修改id名称  dom.id
        // var a = document.getElementsByTagName("div")[0]

        // // console.log(a.id)
        // a.id = "大家好" 
        // 6 获取类名  修改class  dom.className

        var a = document.getElementById("qwe")
        // console.log(a.className)
        a.className = "321"
    </script>
</body>

</html>